<template>
  <div class="tips-list-page">
    <ul class="tips-list">
      <li class="tips-item tap-active" v-for="item in list" :key="item.id" @click="$router.push(`/tips/detail/${item.id}/`)">
        <div class="van-hairline--bottom item">
          <div class="tips-info">
            <h3>{{item.name}}</h3>
            <div class="adviser">
              <van-image lazy-load  width="30px" height="30px" round class="avatar" :src="item.tgAvatar" @click.native.stop="$router.push(`/adviser/detail/${item.tgId}/`)"/>
              <span style="margin-right: 30px; font-weight: bold;">{{item.tgName}}</span>
              <i style="margin-right: 15px;" class="icon icon-read"></i>
              <span>{{item.paidCount}}</span>
            </div>
          </div>
          <div class="price van-hairline--left">
            <i class="icon icon-free"></i>
          </div>
        </div>
      </li>
    </ul>
    <div class="text-center">
      <van-loading v-show="loading" type="spinner" size="16px">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { Loading } from 'vant';
import { pageTipApp } from '../../api/tip';

export default {
  components: {
    [Loading.name]: Loading
  },

  data: function() {
    return {
      list: [],
      loading: false,
      page: 1,
      size: 10
    }
  },

  mounted() {
    this.pageTipApp();
    this.$bus.$on('reachBottom', this.reachBottom.bind(this));
  },

  beforeDestroy() {
    this.$bus.$off('reachBottom');
  },

  methods: {
    async pageTipApp() {
      try {
        this.loading = true;
        const data = await pageTipApp({
          offset: 0,
          size: 10,
          type: 1,
        })

        this.list = data.list;
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false;
      }
    },

    async reachBottom() {
      try {
        this.loading = true;
        ++this.page;
        const data = await pageTipApp({
          offset: (this.page - 1) * this.size,
          size: this.size,
          type: 1
        });
        this.list = this.list.concat(data.list);
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style lang="less">
.tips-list-page {
  .tips-list {
    background-color: #fff;

    .tips-item {
      padding: 0 15px;

      .item {
        display: flex;
        align-items: center;
        padding: 15px 0;

        .avatar {
          border-radius: 50%;
          width: 30px;
          height: 30px;
          display: inline-block;
          margin-right: 10px;
        }

        .adviser {
          display: flex;
          align-items: center;
          margin-top: 10px;
        }

        .tips-info {
          flex: 1;
        }

        .price {
          padding: 30px 0 30px 30px;
        }
      }
    }
  }
}
</style>
